<template>
  <div id="content">
    <div class="main">
      <h1>后台管理系统</h1>
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        size="mini"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <el-input
            v-model="loginForm.name"
            prefix-icon="iconfont icon-yonghu"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            :type="hiddeneye ? 'password' : 'text'"
            v-model="loginForm.pwd"
            prefix-icon="iconfont icon-mima"
            autocomplete="off"
            @keyup.native.13="submitForm('loginForm')"
          >
            <template #suffix>
              <i
                class="iconfont"
                :class="hiddeneye ? 'icon-eyes' : 'icon-eyes-'"
                @click="hiddeneye = !hiddeneye"
              ></i>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :loading="gflag"
            @click="submitForm('loginForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Login } from '@/api/users.js'
// 存储
import local from '@/utils/locl.js'
import { cRouter } from '../router/index'
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      } else {
        callback()
      }
    }
    var validatePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      // 1 数据控制对象
      loginForm: {
        pwd: '',
        name: ''
      },
      // 2 规则控制对象
      rules: {
        name: [{ validator: checkName, trigger: 'blur' }],
        pwd: [{ validator: validatePwd, trigger: 'blur' }]
      },
      hiddeneye: true,
      gflag: false
    }
  },
  methods: {
    submitForm(formName) {
      this.gflag = true
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const data = await Login({
            account: this.loginForm.name,
            password: this.loginForm.pwd
          })
          // console.log(data)
          if (data.code === 0) {
            this.$message({
              message: data.msg,
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push('/')
            }, 1600)
            // 将token存入本地
            local.set('token', data.token)
            local.set('role', data.role)
            // console.log(data.token)
            cRouter()
          } else {
            this.$message.error(data.msg)
            this.gflag = false
          }
        } else {
          this.$message.error('你咋不填呀')
          this.gflag = false
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
    /*  getEyes() {
      console.log('213')
    } */
  }
}
</script>

<style lang="less" scoped>
#content {
  width: 100%;
  height: 100%;
  background-color: #202d39;
  display: flex;
  justify-content: center;
  align-items: center;
  .main {
    width: 320px;
    height: 200px;
    -moz-user-select: none; /* Firefox私有属性 */
    -webkit-user-select: none; /* WebKit内核私有属性 */
    -ms-user-select: none; /* IE私有属性(IE10及以后) */
    -khtml-user-select: none; /* KHTML内核私有属性 */
    -o-user-select: none; /* Opera私有属性 */
    user-select: none; /* CSS3属性 */
    h1 {
      font-size: 20px;
      color: #fff;
      text-align: center;
      margin-bottom: 30px;
    }
    .el-input {
      cursor: pointer;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
